<template>
  <div>
    <h1>留言列表</h1>
    <div class="z">
      <el-table :data="msgs" stripe style="width: 100%">
        <el-table-column prop="mid" label="ID" width="200px" />
        <el-table-column prop="creatorid" label="创建者ID" width="200px" />
        <el-table-column prop="content" label="内容" width="600px" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
      </el-table>
    </div>
    
    <div class="pagination-container">
      <el-pagination
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      layout="total,prev,pager,next,jumper"
      :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { getApi,postApi,deleteApi,updateApi} from '@/util/api'
</script>

<script>
  export default {
      data() {
        
          return {
            msgs: [],
              pagination:{
          currentPage:1,//当前页码
          pageSize:7,//一页多少条
          total:0
        }  
        ,
          }
      },
      created(){
        this.getAll();
      }
      ,
      methods:{
        //分页
        getAll(){
          getApi("admin/msgs/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((rs)=>{
              this.pagination.pageSize = rs.data.data.size;
              this.pagination.currentPage = rs.data.data.current;
              this.pagination.total = rs.data.data.total;
              this.msgs=rs.data.data.records;
              console.log(this.msgs)
              }).catch(error=>{

                  alert(error);
              })
        },
        handleCurrentChange(currentPage){
          //修改页码值为当前选中页码值
          this.pagination.currentPage = currentPage;
          //执行查询
          this.getAll();
        },
        //删除
      handleDelete(row){
      this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
        type:'info',
        confirmButtonText:"确定",
          cancelButtonText:"取消"
      }).then(()=>{
        deleteApi("admin/msgs/"+row.mid).then((res)=>{
      if(res.data.flag){
          this.$message.error("删除失败");
      }else{
        this.$message.success("删除成功");
      }
      }).finally(()=>{
        this.getAll();
      });
      }).catch(()=>{
        this.$message.info("取消删除操作");
      });},


      }
      ,
      mounted() {
          
      },
  }
</script>


<style lang="scss" scoped>
.pagination-container{
  position: absolute;
  right: 70px;
  margin-top: 10px;
}

.z{
  margin-top: 30px;
}
</style>